<template>
  <div id="code-home" class="manage-pos">
    <tag-box v-show="showChild">
      <template v-slot:code>
        <div class="opentype-tag choose-bg-tag">代码项信息</div>
      </template>
    </tag-box>
    <div class="dep_top" v-show="!showChild">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row>
            <a-col :md="8" :sm="24">
              <a-form-item label="类别ID">
                <a-input
                  v-model="queryParam.item_type_id"
                  clearable
                  placeholder="请输入"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
            <span class="table-edit-submitButtons">
              <a-button type="primary" class="ml8" v-action:query @click="$refs.table.refresh(true)">查询</a-button>
              <a-button class="ml8" @click="handleReset">重置</a-button>
              <a-button type="danger" class="ml8" v-action:add @click="openAddComp">新增</a-button>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
    <div class="dep_main" v-show="!showChild">
      <s-table
        ref="table"
        size="default"
        :row-key="(r,i) => i.toString()"
        :columns="columns"
        :data="loadData">
        <span slot="action" slot-scope="t, r">
          <a
            v-action:edit
            href="javascript:void(0);"
            @click="editCode(r)">编辑</a>
          <a-divider type="vertical" />
          <a v-action:delete href="javascript:void(0);" @click="del(r)">删除</a>
        </span>
      </s-table>
    </div>
    <transition name="slide-fade">
      <div class="popContainer" v-if="showChild">
        <edit-code
          :open-type="openType"
          :show-child.sync="showChild"
          :form-data="formData"
          @addCode="addCode"
          @updateCode="updateCode"
        ></edit-code>
      </div>
    </transition>
  </div>
</template>
<script>

import EditCode from './EditCode' // 查询组件
import { codeList, addCode, changeCode, deleteCode } from '@/api/leave'
import { TagBox } from '@/myComponents'
import { STable } from '@/components'
import * as api from "@/api/systemAdmin";

export default {
  name: 'CodeHome',
  components: {
    EditCode,
    TagBox,
    STable
  },
  data () {
    return {
      loading: false,
      openType: 0,
      formData: {},
      showChild: false,
      columns: [
        {
          title: '序号',
          width: 50,
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: (t, r, index) => {
            return ((this.paginationInfo.pageNum - 1) * this.paginationInfo.pageSize + index + 1)
          }
        },
        {
          title: '类别ID',
          width: 90,
          align: 'center',
          dataIndex: 'item_type_id'
        },
        {
          title: '类别描述',
          width: 90,
          align: 'center',
          dataIndex: 'item_type_desc'
        },
        {
          title: '代码项描述',
          width: 90,
          align: 'center',
          dataIndex: 'item_desc'
        },
        {
          title: '操作',
          width: 90,
          dataIndex: '',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],
      queryParam: {},
      paginationInfo: null,
      loadData: parameter => {
        this.paginationInfo = parameter
        return codeList(Object.assign(parameter, this.queryParam))
          .then(res => {
            if (res.code === 0) {
              return res.data
            } else {
              this.$message.error(res.msg)
              return {
                list: []
              }
            }
          })
      }
    }
  },
  created () {

  },
  methods: {
    async addCode (obj) {
      // 新增代码项
      const addCodeData = await addCode(obj)
      if (addCodeData.code === 0) {
        this.$message.success(addCodeData.data)
        this.$refs.table.refresh(true)
      } else {
        this.$message.warning(addCodeData.msg)
      }
    },
    async updateCode (data) {
      console.log('data', data)
      const changeMsg = await changeCode(data)
      if (changeMsg.code === 0) {
        this.$message.success(changeMsg.msg)
        this.$refs.table.refresh()
      } else {
        this.$message.warning(changeMsg.msg)
      }
    },
    del (value) {
      let _this = this
      this.$confirm({
        title: '确定删除该代码项么',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          deleteCode({
            item_type_id: parseInt(value.item_type_id),
            item_val: value.item_val
          }).then(data => {
            if (data.success) {
              _this.$message.success(data.data)
              _this.$refs.table.refresh()
            } else {
              _this.$message.warning(data.msg)
            }
          }).catch(error => {}).finally(() => {

          })
        },
        onCancel () {
        }
      })
    },

    handleReset () {
      this.queryParam = {}
      this.$refs.table.refresh(true)
    },
    openAddComp () {
      this.showChild = true
      this.openType = 0
    },
    queryCode(data) {
      this.queryParam = data
      this.$refs.table.refresh(true)
    },
    editCode (row) {
      this.openType = 1
      this.showChild = true
      this.formData = row
    },
  }
}
</script>
<style scoped>
.el-table td,
.el-table th {
  text-align: center;
}

.block {
  margin-top: 5px;
}
/*.popContainer {*/
/*  position: fixed;*/
/*  display: flex;*/
/*  top: 0;*/
/*  left: 180px;*/
/*  right: 0;*/
/*  bottom: 0;*/
/*  z-index: 1000;*/
/*  background: rgba(16, 16, 16, 0.2);*/
/*}*/
</style>
